iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Modern Web

少年學Vue,如隙中窺月系列 第 16

[Day16] 頁面操作 (v-on) 進階

  • 分享至 

  • xImage
  •  

帶入參數

我們設定一個 dataArr 陣列,裡面存放 name 還有 money 組成的物件,我們宣告一個 save 方法,傳入一個物件 item 把當成這個方法參數,並將這個方法用 @click 綁定在 button 的點擊事件。最後我們使用 v-for 存取 dataArr 的資料 ,將 dataArr 的值傳入 item ,此時當我們點擊按鈕後,dataArr 就會用 item 物件的方式傳入 save 方法中,執行將物件的 money 加 500。

<body>
    <div class="app">
        <ul>
            <li v-for="item in dataArr">
                {{item.name}}有{{item.money}}$ <input type="button" value="儲值" @click="save(item)">
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            dataArr:[
                {
                    name: 'Leo',
                    money:200
                },
                {
                    name: 'Peter',
                    money:600
                },
                {
                    name: 'Amy',
                    money:500
                }
            ]
        },
        methods:{
            save:function(item){
                item.money+=500;
            }
        }
    });
</script>

https://i.imgur.com/eGbsolF.png

事件修飾符

如果我們設定三個 div 區塊,一個 div 區塊包著另一個 div 區塊,並且在 div 區塊內設定點擊方法 show,此方法會秀出 div 區塊的名稱,此時當我點擊最裡面 div 區塊元素時可以發現,我們明明只有點擊到最內部的 div 區塊,console 卻顯示從 box3box1,這是因為我們在觸發動元素時是由內從外觸發。所以我們點擊內部 div 也會觸發到外部的 div 區塊。

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;" @click="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

https://i.imgur.com/lHW0BnC.png

.stop

若我們在 @click 加上 .stop 就可以讓點擊事件不向外擴散。

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;"@click.stop="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click.stop="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click.stop="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
        },
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

.capture

如果我們在 @click 加上 .capture 就可以讓點擊事件變成由外而內觸發,當我們點擊時顯示 box1 → box2

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;"@click.capture="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click.capture="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click.capture="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
        },
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

.self

@click 加上 .self,就只會觸發本身事件

<body>
    <div class="app">
        <div style="width:100px;height:100px;background-color: red;"@click.self="show('box1')">
            <div style="width:50px;height:50px;background-color:black;"@click.self="show('box2')">
                <div style="width:25px;height:25px;background-color:green;"@click.self="show('box3')">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
        },
        methods:{
            show: function(item){
                console.log(item);
            }
        }
    });
</script>

上一篇
[Day15] 元件概念
下一篇
[Day17] 條件式 (v-if) 進階
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言